<script setup>
import { onMounted, ref, computed, onActivated, onDeactivated } from 'vue'
import { userApi, festivalApi } from '@/api'
import { showDialog } from 'vant'
import wx from 'weixin-js-sdk'
import { useRouter } from 'vue-router'
import Tab from '@/components/Tab.vue'
const router = useRouter()

const scrollContainer = ref(null)
const scrollTop = ref(0)

// 记录滚动位置
const handleScroll = () => {
  scrollTop.value = scrollContainer.value.scrollTop
}

// 恢复滚动位置
onActivated(() => {
  // 恢复滚动位置
  const savedScrollTop = Number(sessionStorage.getItem('homeScrollTop') || 0)
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = savedScrollTop
  }
})

// 离开时保存位置
onDeactivated(() => {
  sessionStorage.setItem('homeScrollTop', scrollTop.value || 0)
})

const msg = ref('')
const statusCode = ref(null)
const state = ref('')
const hotelList = ref([])

const isover = ref(false)

const isMsg = computed(() => {
  return [1, 2, 3, 5, 7].includes(statusCode.value)
})

const init = () => {
  const uid = localStorage.getItem('uid')
  userApi.checkActivityTime({uid}).then(
    res=> {
      console.log(res)
      localStorage.setItem('isover', res.data)
      isover.value = res.data
    }
  )
  festivalApi.getCompanyList({
    uid:uid,
    pageNum:1,
    pageSize:10000
  }).then(
    res => {
      if(res.code === 0) {
        hotelList.value = res.data
        hotelList.value.map(item => {
          item.defaultImage = window.APP_CONFIG?.apiBaseUrl + item.defaultImage
        })
      }
    }
  )
}
const handleToScrape = () => {
  const status = localStorage.getItem('status')
  if (status === 'false') {
    showDialog({
      message: '您还不是会员，请前往【首页-我要入会】加入工会，点击确认立即跳转',
      confirmButtonText: '确定',
    }).then(() => {
      wx.miniProgram.navigateTo({
        url: `/pages/index/index`
      })
    });
  } else {
    router.push('/scrape')
  }
  
}

const handleTo = (hotel) => {
  // 跳转前保存滚动位置
  sessionStorage.setItem('homeScrollTop', scrollContainer.value?.scrollTop || 0)
  router.push(`/hotel?id=${hotel.id}`)
}

onMounted(() => {
  init()
})
</script>

<template>
  <div class="home-container">
    <!-- 添加scroll事件监听 -->
    <div 
      style="flex: 1; overflow: scroll; padding-bottom: 55px;" 
      ref="scrollContainer"
      @scroll.passive="handleScroll"
    >
      <div>
        <img src="@/assets/img/index_1.png" alt="" srcset="">
      </div>
      <div class="secction1">
        <img src="@/assets/img/index_2.png" alt="" srcset="">
        <div class="d desc1">
          2025年5月27日—5月31日连续5天，<br/>每天12:00至17:00，抢完即止。
        </div>
        <div class="d desc2">
          在“无锡市总工会”微信小程序或江苏工会App上已实名认证的无锡工会会员(以下简称“工会会员”)。
        </div>
        <div class="d desc3">
          本次活动共发放工会疗休养电子消费券5000张(以下简称工会消费券)，其中面值400元的工会消费券1000张、面值200元的工会消费券4000张。
        </div>
        <div class="d desc4">
          通过“无锡市总工会”微信小程序参与“刮刮乐”抽奖得券，每个工会会员(同一手机号、身份证号为同一会员)每天有3次刮奖机会；每天发放定量奖品，若当天奖池未消耗完，则释放至下一场次，直至5月31日活动结束。整场活动期间，每个工会会员最多可得价值400元的工会消费券1张或者价值200元的工会消费券2张。
        </div>
      </div>
      <div class="secction2">
        <img src="@/assets/img/index_3.png" alt="" srcset="">
        <div class="d desc5">
          <p>
          (1)使用时间：自抽奖活动开始之日起至2025年8月31日23时止(以中奖工会会员办理入住时间为准)。
          </p><p>

(2)适用商家为无锡市内17家省、市两级职工疗休养合作单位：<span v-for="item in hotelList" @click="handleTo(item)">{{ item.custname }}，</span>
本次活动消费券仅可在前述17家商家线下门店使用，不可通过线上APP软件等第三方平台使用。涉及客房预约等具体事宜，请自行咨询商家。
</p><p>
(3)工会消费券可叠加使用，但不兑现、不找零，不得购买烟酒等非疗休养用途商品。
</p><p>
(4)工会会员可根据工会消费券面额，自行选择用于抵扣“工会疗休养消费券专享套餐(价格)”，或者直接消费抵扣客房门市价格，超出部分金额由工会会员自行承担。在前述两种消费模式的基础上(即需要发生住宿消费情形)，若工会消费券仍有剩余面值，工会会员可选择用于商家其他消费项目，也可选择放弃使用。
</p><p>
(5)使用工会消费券时，工会会员应当主动出示二维码及本人身份证件，配合商家核验核销。
</p><p>
(6)工会消费券仅限中奖工会会员本人使用，不得以任何形式转赠、出售、冒用、套现等。若发现中奖工会会员在活动期间存在不当或恶意行为，有权取消其参加本次活动资格，追索相应款项，并可追究相关法律责任。
</p><p>
(7)活动期间，商家应当严格遵守各项法律法规以及活动相关规定，做到诚信、规范经营，不得直接或者变相提高价格、降低服务标准(包括但不限于住宿、餐饮)；切实履行企业法律责任，落实安全“第一责任人”职责，若工会会员在活动期间发生安全责任事故，由承接其服务的商家承担相应责任，与无锡市总工会无关。
</p><p>(8)本次活动最终解释权归无锡市总工会所有。</p>
        </div>
      </div>
      <div class="secction3">
        <img src="@/assets/img/index_4.png" alt="" srcset="">
        <ul class="hotel-list">
          <li v-for="item in hotelList" @click="handleTo(item)">
            <div class="img">
              <img :src="item.defaultImage" alt="">
              <span class="badge">查看详情</span>
            </div>
            <div>{{ item.custname }}</div>
          </li>
        </ul>
      </div>
      <div style="font-size: 16px;color: #333; text-align: center;" v-if="!isover">抽奖活动期间咨询电话：0510-68780110</div>
      <div class="secction5">
        <img src="@/assets/img/index_5.png" alt="" srcset="">
      </div>
      <a @click="handleToScrape" class="enter"  v-if="!isover">
        <img src="@/assets/img/index_enter.png" style="width: auto;height: 50px;" alt="">
      </a>
    </div>
    <Tab active="1" :isover="isover"></Tab>
  </div>
</template>

<style scoped lang="less">
.home-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background-image: linear-gradient(180deg, #EAE1B3 0%, #D0C07B 100%);
  color: #fff;
  img{
    width: 100%;
  }
}
.d{
  position: absolute;
  width: 80%;
  margin: 0 10%;
  color: #E8E7A6;
  font-size: 14px;
  line-height: 1.8;
}
.secction1 {
  margin-top: -180px;
  position: relative;
  
  .desc1{
    text-align: center;
    top: 80px;
  }
  .desc2{
    text-align: left;
    top: 209px;
  }
  .desc3{
    text-align: left;
    top: 365px;
  }
  .desc4{
    text-align: left;
    bottom: 60px;
  }
}

.secction2{
  margin-top: -50px;
  position: relative;
  .desc5{
    top: 120px;
    p{
      margin-bottom: 15px;
      font-size: 14px;
    }
  }
}

.secction3{
  margin-top: -50px;
  position: relative;
}
.header {
  padding: 20px 15px;
  text-align: center;
}

.title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.main-title {
  color: #ffcc00;
}

.divider {
  margin: 0 8px;
}

.subtitle {
  font-size: 14px;
  opacity: 0.8;
}

.content {
  padding: 0 15px;
}


.contact-info {
  margin-bottom: 5px;
}

.hotel-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;
  position: absolute;
  width: 80%;
  margin: 0 10%;
  top: 150px;
  li{
    width: 48%;
    margin-bottom: 10px;
    div.img{
      position: relative;
      margin-bottom: 5px;
      .badge {
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: #FCDC5A;
        color: #008046;
        font-size: 10px;
        padding: 1px 4px;
        border-radius: 8px 0 8px 0;
        pointer-events: none;
      }
    }
    img{
      width: 100%;
      border-radius: 8px;
      height: 95px;
      display: block;
    }
    div{
      text-align: center;
      font-size: 14px;
      color: #fff;
    }
  }
}
.enter {
  position: fixed;
  bottom: 80px;
  right: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  display: block;
  left: 0;
}
</style>